<template>
  <el-dialog title="选择单据" v-model="dialogVisible" width="80%">
    <div class="filter-container">
      <el-input style="width: 180px" placeholder="按单号查询" clearable class="filter-item" @change="research"
        @clear="research" v-model="query.OrderNo"></el-input>
      <el-input style="width: 180px" placeholder="按料号查询" clearable class="filter-item" @change="research"
        @clear="research" v-model="query.MaterialCode"></el-input>
      <el-select style="width: 180px" placeholder="按仓库筛选" clearable class="filter-item" @change="research"
        v-model="query.WarehouseId">
        <el-option v-for="i in whOptions" :key="i.key" :value="i.key" :label="i.value"></el-option></el-select>
      <el-select style="width: 180px" placeholder="按单据类型筛选" clearable class="filter-item" @change="research"
        v-model="query.DocTypes">
        <el-option v-for="i in odOptions" :disabled="i.disabled" :key="i.key" :value="i.key"
          :label="i.value"></el-option>
      </el-select>
      <el-select style="width: 180px" placeholder="按单据状态筛选" multiple clearable class="filter-item" @change="research"
        v-model="query.docStatusArr" collapse-tags>
        <el-option v-for="i in docStatusTypes" :key="i.value" :label="i.label" :value="i.value"></el-option>
      </el-select>
      <el-button class="filter-item" type="success" plain @click="research">查询
      </el-button>
    </div>
    <z-table :tableLoading="tableLoading" @current-change="selectChange" :list="list" :tableProps="tableProps"
      :columns="columns">
      <template v-slot:content="{ row, key }">
        <span v-if="key == 'OrderStatus'" class="text-label" :class="getLabelByValue(docStatusTypes, row[key], 'bg')">
          {{ getLabelByValue(docStatusTypes, row[key]) }}
        </span>
      </template>
    </z-table>
    <z-pagination :pagination="pagination" :total="total" v-model:page="query.page" v-model:limit="query.rows"
      @change="getlist"></z-pagination>
    <template #footer>
      <span>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="afterSelect">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script>
import commonMixin from '@/views/_common/mixin'
export default {
  mixins: [commonMixin],
  name: 'orderSelector',
  props: {
    modelValue: {
      type: Boolean,
      default: false,
    },
    orderTypes: {
      type: String,
      default: null,
    },
    finishStatus: {
      type: Array,
      default: function () {
        return [0, 2]
      },
    },
  },
  computed: {
    dialogVisible: {
      get: function () {
        return this.modelValue
      },
      set: function (v) {
        this.$emit('update:modelValue', v)
      },
    },
    odOptions: function () {
      var typeArr = []
      if (this.orderTypes) typeArr = this.orderTypes.split(',')
      return this.orderTypeOptions.map(x => ({
        ...x,
        disabled: !typeArr.includes(x.value),
      }))
    },
  },
  data() {
    return {
      tableLoading: false,
      tableProps: {
        hideOperations: true,
        'highlight-current-row': true,
      },
      query: {
        page: 1,
        rows: 10,
        docTypes: null,
        docStatusArr: [...this.finishStatus],
      },
      columns: [
        { title: '类型', key: 'OrderType', width: 100 },
        { title: '单号', key: 'OrderNo', width: 180 },
        { title: '仓库', key: 'WarehouseName', width: 100 },
        { title: '单据日期', key: 'OrderDate', width: 140 },
        { title: '单据状态', key: 'OrderStatus', width: 100 },
        { title: '客户代码', key: 'CustomCode', width: 80 },
        { title: '客户名称', key: 'CustomName' },
        { title: '供应商代码', key: 'VendorCode', width: 100 },
        { title: '供应商名称', key: 'VendorName', 'min-width': 100 },
        { title: '修改人', key: 'Modifier', width: 80 },
        { title: '修改时间', key: 'ModifyTime', width: 160 },
      ],
      selectedRow: null,
      orderTypeOptions: [],
      whOptions: [],
      docStatusTypes: [
        { label: '未开始', value: 0, bg: 'bg-gray' },
        { label: '已完成', value: 1, bg: 'bg-purple' },
        { label: '执行中', value: 2, bg: 'bg-green' },
        { label: '已撤销', value: 3, bg: 'bg-yellow' },
      ],
    }
  },
  watch: {},
  methods: {
    research() {
      this.query.page = 1
      this.getlist()
    },
    getlist() {
      if (!this.query.docTypes) this.query.docTypes = this.orderTypes
      if (!this.query.docTypes) return
      this.query.docStatus = this.query.docStatusArr.length > 0 ? this.query.docStatusArr.join(',') : ''
      this.tableLoading = true
      this.http.post('/api/Wms_Order/GetOrderList', this.query, 'post')
        .then(r => {
          this.list = r.rows
          this.total = r.total
        })
        .finally(_ => {
          this.tableLoading = false
        })
    },
    selectChange(row) {
      this.selectedRow = row
    },
    afterSelect() {
      this.$emit('afterSelected', this.selectedRow)
    },
    // 重置筛选条件
    resetFilter() {
      this.query = {
        page: 1,
        rows: 10,
        docTypes: null,
        docStatusArr: [...this.finishStatus],
      }
      // 清除所有输入框内容
      this.query.OrderNo = ''
      this.query.MaterialCode = ''
      this.query.WarehouseId = ''
      this.query.DocTypes = ''
      // 查询以应用新的筛选条件
      this.getlist()
    },
  },
  created() {
    this.http.post('/api/Wms_Warehouse/getPageData', { page: 1, rows: 9999 }).then(r => {
      this.whOptions = this.arrayOptions(r.rows, 'WarehouseId', ['WarehouseCode', 'WarehouseName'])
    })
    this.http.post('/api/Wms_OrderType/getPageData', { page: 1, rows: 9999 }).then(r => {
      this.orderTypeOptions = this.arrayOptions(r.rows, 'OrderTypeId', ['OrderTypeCode', 'OrderTypeName'])
    })
    this.getlist()
  },
}
</script>
